﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="CustomDates.aspx.cs" Inherits="ControlExplorer.C1Calendar.CustomDates" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Calendar" TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">

        function customizeDate($daycell, date, dayType, hover, preview) {
            if (date.getMonth() === 11 && date.getDate() === 25) {
                var $img = $('<div></div>').width(16).height(16).css('background-image', 'url(images/xmas.png)');

                $daycell.attr('align', 'right').empty().append($img);

                if ($daycell.hasClass('ui-datepicker-current-day')) {
                    $daycell.css('background-color', '#aaa');
                } else
                    $daycell.css('background-color', hover ? 'lightgray' : '');
                return true;
            }

            return false;
        }

    </script>
    <wijmo:C1Calendar ID="C1Calendar1" runat="server" DisplayDate="2011-12-01" OnClientCustomizeDate="customizeDate">
    </wijmo:C1Calendar>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        <strong>C1Calendar </strong>可以显示客户端定制的每个日期单元格。
    </p>
    <p>
        执行客户端<b>OnClientCustomizeDate</b> 属性指定的回调函数，可以实现日期单元格的定制。
    </p>
    <p>
        回调函数的参数:
    </p>
        <ul>
            <li>日期单元格 - jQuery对象表示需要进行定制的日期表单元格。 </li>
            <li>日期 - 单元格的日期。 </li>
            <li>日期类型 - 日期的类型 </li>
            <li>悬停- 鼠标是否停在单元格上面。 </li>
            <li>预览 - 是否渲染预览器。 </li>
        </ul>
    <p>
        在这个例子中，我们用了一张圣诞节的图片。如果您想要用自己的风格比如对一些定制日期高亮显示，也是很有效果的。
    </p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
